<template>
  <div id="app">
    <div class="container">
      <router-view></router-view>
    </div>
    <div class="footer">
      <cube-tab-bar
        v-model="selectedLabelDefault"
        :data="tabs"
        @click="clickHandler"
      ></cube-tab-bar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedLabelDefault: "/",
      tabs: [
        {
          label: "首页",
          value:'/',
          icon: "iconfont icon-yemian-copy-copy-copy",
        },
        {
          label: "我的课程",
          value:'/course',
          icon: "iconfont icon-wodekechengCopy",
        },
        {
          label: "个人中心",
          value:'/profile',
          icon: "iconfont icon-gerenzhongxin-zhong",
        },
      ],
    }
  },
  methods: {
    clickHandler(value){
      // console.log(value);
      this.$router.push(value);// 点击自动跳转到指定的路由组件
    }
  },
  watch: {
    $route:{
      handler(to,from){
        this.selectedLabelDefault = to.path;// 监听route，从而在刷新的时候可以改变默认选择的路由
      },
      immediate:true//刚开始进入页面的时候也会监听route
    }
  },
};
</script>
<style lang="less">
html,body,#app{
    height: 100%;
    font-size:16px;
}

#app{
  display: flex;
  flex-direction: column;
  .container{
    flex:1;
  }
  .footer{
    height: 56px;
  }
}
</style>
